<script setup lang="ts">
import UserProfileCard from '@/components/UserProfileCard.vue'
import { inject, onBeforeMount, onMounted, type Ref, ref, watch } from 'vue'

import { useLoginStore } from '@/stores/login'
import { MutationType } from 'pinia'


const isLoginSuccess = inject("isLoginSuccess") as Ref<boolean>

const isUsernameAvailable = ref(false)
const isUserAvatarAvailable = ref(false)
const loginStore = useLoginStore();
const username = ref("") as Ref<string>
const userAvatar = ref("") as Ref<string>
const userIntroduce = ref("") as Ref<string>


function loadData(){
  if(loginStore.isLogin){
    username.value = loginStore.user.username
    userAvatar.value = loginStore.avatar
    console.log(loginStore.$state)
    isUsernameAvailable.value = true
  }
}

loginStore.$subscribe((mutation, state)=>{
    if(mutation.type === MutationType.patchObject){
      if(!state.isLogin){
        isLoginSuccess.value = false
      } else {
        isLoginSuccess.value = true
        if(mutation.payload.user){
          username.value = mutation.payload.user.username
          isUsernameAvailable.value = true
        }
        if(mutation.payload.avatar){
          userAvatar.value = mutation.payload.avatar
          isUserAvatarAvailable.value = true
        }
      }
    }
})
onBeforeMount(loadData)
</script>

<template>
  <aside class="right__side">
    <user-profile-card :avatar="userAvatar?userAvatar:''"
                       :username="username"
                       :short-introduce="userIntroduce"
                       v-if="isLoginSuccess && isUsernameAvailable"/>
  </aside>
</template>

<style scoped lang="scss">
.right__side{
  margin-right: var(--spacing-xs);
}
//.login__register__buttons {
//  //position: absolute;
//  width: 100%;
//  display: grid;
//  grid-template-columns: 1fr 1fr;
//}

</style>